import { init } from "./node_modules/snabbdom/build/package/init.js";
import { classModule } from "./node_modules/snabbdom/build/package/modules/class.js";
import { propsModule } from "./node_modules/snabbdom/build/package/modules/props.js";
import { styleModule } from "./node_modules/snabbdom/build/package/modules/style.js";
import { eventListenersModule } from "./node_modules/snabbdom/build/package/modules/eventlisteners.js";
import { h } from "./node_modules/snabbdom/build/package/h.js";

var patch = init([classModule, propsModule, styleModule, eventListenersModule]);

var vnode;

let oData = [
    { title: "这是标题9", doc: "这是标题9的内容", time: "2020-09-09", author: "李四" },
    { title: "这是标题8", doc: "这是标题8的内容", time: "2020-09-08", author: "小强" },
    { title: "这是标题7", doc: "这是标题7的内容", time: "2020-09-07", author: "小明" },
    { title: "这是标题6", doc: "这是标题6的内容", time: "2020-09-06", author: "小红" },
    { title: "这是标题5", doc: "这是标题5的内容", time: "2020-09-05", author: "王二" },
    { title: "这是标题4", doc: "这是标题4的内容", time: "2020-09-04", author: "李四" },
    { title: "这是标题3", doc: "这是标题3的内容", time: "2020-09-03", author: "小强" },
    { title: "这是标题2", doc: "这是标题2的内容", time: "2020-09-02", author: "小明" },
    { title: "这是标题1", doc: "这是标题1的内容", time: "2020-09-01", author: "小红" },
    { title: "这是标题0", doc: "这是标题0的内容", time: "2020-09-00", author: "王二" },
];

let currentRow;
function createLi(ele) {
    return h(
        "li.info-item",
        {
            key: ele.title.replace(/[^0-9]/gi, ""),
            class: { active: currentRow === ele.title },
            on: { click: changeRow.bind(this, ele) },
        },
        [
            h("p.title", [
                ele.title,
                h(
                    "button.delBtn",
                    {
                        on: {
                            click: delItem.bind(this, ele),
                        },
                    },
                    "x"
                ),
            ]),
            h("div.content", ele.doc),
            h("div.info", [h("span.author", ele.author), h("span.time", ele.time)]),
        ]
    );
}
function delItem(ele) {
    oData.forEach((item, index) => {
        if (ele.title == item.title) {
            oData.splice(index, 1)
        }
    });
    let newVnode = view(oData);
    vnode = patch(vnode, newVnode);
}
function addItem() {
    let key = 0;
    oData.forEach(item => {
        let currentKey = parseInt(item.title.replace(/[^0-9]/ig, ""));
        key < currentKey && (key = currentKey);
    });
    ++key
    oData.unshift({
        title: `这是标题${key}`,
        doc: `这是标题${key}的内容`,
        time: `2020-09-${String(key).padStart(2, 0)}`,
        author: "李四",
    });
    let newVnode = view(oData);
    vnode = patch(vnode, newVnode);
}
function changeRow(ele) {
    currentRow = ele.title;
    let newVnode = view(oData);
    vnode = patch(vnode, newVnode);
}
let px = true;
function sort() {
    px = !px;
    let data = oData.sort((a, b) => {
        let i = a.title.replace(/[^0-9]/, "");
        let j = b.title.replace(/[^0-9]/, "");
        return px ? i - j : j - i;
    });
    let newVnode = view(oData);
    vnode = patch(vnode, newVnode);
}

function view(data) {
    return h("div.list", [
        h(
            "a.sortBtn",
            {
                on: {
                    click: sort,
                },
            },
            px ? "降序" : "升序"
        ),
        h(
            "a.sortBtn",
            {
                on: {
                    click: addItem,
                },
            },
            "ADD"
        ),
        h("ul.info-box", {}, data.map(createLi)),
    ]);
}

window.onload = function () {
    const app = document.querySelector("#app");
    vnode = view(oData);
    vnode = patch(app, vnode);
};
